<template>
  <Layout desc="减少白屏时间，提升用户感知">
    <div class="flex gap-5 flex-wrap mt-5">
      <div v-for="i in 100">
        <HeavyComponent v-if="defer(i)" />
      </div>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import HeavyComponent from './components/HeavyComponent.vue'
import { useDefer } from '@/hooks/useDefer'

const defer = useDefer()
</script>

<style scoped lang="scss"></style>
